<template>
	<view class="container">
		<!-- 左边名称 右边自己的信息 -->
		<view class="user-info">
			<view class="user-info-left">头像</view>
			<view class="user-info-right">
				<u-upload :fileList="fileList" name="usertx" @afterRead="afterRead" :maxCount="1" width="250" height="150">
					<image class="user-info-right-avatar" :src="update_user_info.usertx"></image>
				</u-upload>
				<u-icon name="arrow-right" color="#666" size="20"></u-icon>
			</view>
		</view>
		<view class="user-info">
			<view class="user-info-left">背景</view>
			<view class="user-info-right">
				<u-upload :fileList="fileList" name="userbg" @afterRead="afterRead" :maxCount="1" width="250" height="150">
					<image class="user-info-right-avatar" style="border-radius: unset;" :src="update_user_info.userbg"></image>
				</u-upload>
				<u-icon name="arrow-right" color="#666" size="20"></u-icon>
			</view>
		</view>
		<view class="user-info">
			<view class="user-info-left">账号</view>
			<view class="user-info-right">
				<view class="user-info-right-input">
					{{ user_info.username }}
				</view>
				<u-icon name="arrow-right" color="#666" size="20"></u-icon>
			</view>
		</view>
		<view class="user-info">
			<view class="user-info-left">昵称</view>
			<view class="user-info-right">
				<view class="user-info-right-input">
					<u--input placeholder="请输入昵称" inputAlign="right" border="none" v-model="update_user_info.nickname"></u--input>
				</view>
				<u-icon name="arrow-right" color="#666" size="20"></u-icon>
			</view>
		</view>
		<view class="user-info" @click="sex_show = true">
			<view class="user-info-left">性别</view>
			<view class="user-info-right">
				<view class="user-info-right-input">
					{{ sexName }}
				</view>
				<u-icon name="arrow-right" color="#666" size="20"></u-icon>
			</view>
		</view>
		<view class="user-info">
			<view class="user-info-left">QQ</view>
			<view class="user-info-right">
				<view class="user-info-right-input">
					<u--input placeholder="请输入qq" inputAlign="right" border="none" v-model="update_user_info.qq"></u--input>
				</view>
				<u-icon name="arrow-right" color="#666" size="20"></u-icon>
			</view>
		</view>
		<view style="margin-bottom: 10upx;">
			<view style="margin: 10upx 0;">签名</view>
			<u--textarea v-model="update_user_info.signature" placeholder="请输入内容"></u--textarea>
		</view>
		<u-button type="success" text="保存信息" @click="modify_user_information"></u-button>
		<u-action-sheet :actions="sex_list" :show="sex_show" cancelText="取消" @select="update_userinfo_sex" @close="sex_show = false"></u-action-sheet>
	</view>
</template>


<script>
export default {
	data() {
		return {
			login_user_id: '', //登录用户id
			user_info: {}, //用户信息
			fileList: [],
			update_user_info: {
				nickname: '',
				sex: '',
				qq: '',
				signature: '',
				usertx: '',
				userbg: ''
			}, //修改后的用户信息
			sexName: '',
			sex_list: [
				{
					name: '男',
					value: 0
				},
				{
					name: '女',
					value: 1
				}
			],
			sex_show: false,
		}
	},
	onLoad() {
		this.login_user_id = uni.getStorageSync('userid');
		//未登录跳转到登录页面
		if (this.login_user_id == '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		this.get_user_other_information();
	},
	onPullDownRefresh() {
		//调用获取数据方法
		this.get_user_other_information();
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 获取用户信息
		async get_user_other_information() {
			let get_user_other_information = await this.$api.get_user_other_information();
			if (get_user_other_information.code == 1) {
				this.user_info = get_user_other_information.data;
				this.update_user_info.nickname = this.user_info.nickname;
				this.update_user_info.usertx = this.user_info.usertx;
				this.update_user_info.userbg = this.user_info.userbg;
				this.update_user_info.sex = this.user_info.sex;
				this.sexName = this.user_info.sexName;
				this.update_user_info.qq = this.user_info.qq;
				this.update_user_info.signature = this.user_info.signature;
			}
		},
		update_userinfo_sex(select) {
			this.update_user_info.sex = select.value;
			this.sexName = select.name;
			this.sex_show = false;
		},
		// 修改用户信息
		async modify_user_information() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let modify_user_information = await this.$api.modify_user_information(this.update_user_info);
			console.log(modify_user_information);
			if (modify_user_information.code == 1) {
				uni.showToast({
					title: modify_user_information.msg,
					icon: 'none'
				})
			}
		},
		// 新增图片
		async afterRead(event) {
			var type = event.name == 'userbg' ? 1 : 0;
			const result = await this.uploadFilePromise(event.file.url, type)
			if (result.code == 1) {
				uni.showToast({
					title: result.msg == 'success' ? '上传成功' : result.msg,
					icon: 'none'
				});
				if (event.name == 'userbg') {
					this.update_user_info.userbg = result.data.url;
				} else {
					this.update_user_info.usertx = result.data.url;
				}
			}
		},
		uploadFilePromise(url, type = 0) {
			var api_url = '';
			if (type = 0) {
				var api_url = 'upload_avatar';
			} else {
				var api_url = 'upload_background';
			}
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$api.baseUrl + api_url,
					filePath: url,
					name: 'file',
					formData: {
						appid: this.$api.appid,
						usertoken: uni.getStorageSync('usertoken')
					},
					success: (res) => {
						resolve(JSON.parse(res.data));
					}
				});
			})
		},
	}
}
</script>

<style lang="less">
.container {
	padding: 20upx;

	.user-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		line-height: 100upx;
		border-bottom: 1upx solid #eee;

		.user-info-left {
			font-size: 28upx;
		}

		.user-info-right {
			display: flex;
			align-items: center;

			.user-info-right-input {
				margin-right: 20upx;
			}

			.user-info-right-avatar {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}
	}
}
</style>
